<template>
  <div class="parent">
    <echartDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="width" :height="height" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watchEffect } from "vue";
import echartDom from "./chartDom.vue";
import { queryConsumeChartForDay } from "@/api/waterKanban";
import { watch } from "fs";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  type: {
    type: String,
    default: ""
  },
  chartData: {
    type: Object,
    default: () => {}
  },
  currentData: {
    type: Object,
    default: () => {}
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {} as any,
  axisData: [],
  coolLoadData: [],
  actualLoadData: [],
  temperatureData: [],
  bandData: 0
});
const { option, axisData, coolLoadData, actualLoadData, temperatureData, bandData } = toRefs(state);

const requestStatusCodes = {
  "11": "Predicted Cooling Load",
  "12": "Actiual Cooling Load",
  "13": "External Temperature"
};

watchEffect(() => {
  axisData.value = [];
  for (const key in props.chartData) {
    const element = props.chartData[key];
    if (key == "11") {
      bandData.value = element[0].range;

      element.forEach(item => {
        axisData.value.push(item.timeValue);
        coolLoadData.value.push(item.value);
      });
    }
    if (key == "12") {
      element.forEach(item => {
        actualLoadData.value.push(item.value);
      });
    }
    if (key == "13") {
      element.forEach(item => {
        temperatureData.value.push(item.value);
      });
    }
  }
  if (isShowEcharts.value) getoptions();
});

const getoptions = () => {
  isShowEcharts.value = true;
  const colors = ["#4786FF", "#FFA299", "#14C7C7", "#4786FF26"];
  option.value = {
    backgroundColor: props.type == "dark" ? "#001e3b" : "",
    color: colors,
    title: {
      text: "Cooling Load Prediction VS Actual Load With Error Band",
      top: "2",
      left: "center"
    },
    grid: {
      left: "40px",
      top: "90px",
      right: "40px",
      bottom: "10px",
      containLabel: true
    },
    legend: {
      data: ["Predicted Cooling Load", "Actual Cooling Load", "External Temperature", "Prediction Error Band"],
      top: "30"
    },
    tooltip: {
      trigger: "axis"
    },
    xAxis: {
      name: "",
      type: "category",
      boundarGap: false,
      data: axisData.value,
      axisPointer: {
        type: "shadow"
      }
    },
    yAxis: [
      {
        name: "Predicted Error Band",
        type: "value",
        alignTicks: true,
        position: "left",
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[3]
          }
        },
        min: 200,
        show: false
      },
      {
        name: "Cooling Load(kW)",
        type: "value",
        alignTicks: true,
        position: "left",
        min: function (value) {
          return Math.floor(value.min / 100) * 100 - 50;
        },
        max: function (value) {
          return Math.ceil(value.max / 100) * 100 + 50;
        },
        axisLabel: {
          formatter: "{value} kW"
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[0]
          }
        }
      },
      {
        name: "Actual Cooling Load",
        type: "value",
        position: "right",
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[1]
          }
        },
        min: 200,
        axisLabel: {
          formatter: "{value} "
        },
        show: false
      },
      {
        name: "External Temperature(°C)",
        type: "value",
        position: "right",
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[2]
          }
        },
        axisLabel: {
          formatter: "{value} °C"
        }
      }
    ],
    series: [
      {
        name: "Predicted Cooling Load",
        data: coolLoadData.value,
        type: "line",
        tooltip: {
          valueFormatter: function (value) {
            return (value ? value.toFixed(2) : 0) + " kW";
          }
        },
        lineStyle: {
          color: "#4786FF",
          width: 3,
          type: "solid"
        },
        yAxisIndex: 1,
        smooth: true
      },
      {
        name: "Actual Cooling Load",
        data: actualLoadData.value,
        type: "line",
        tooltip: {
          valueFormatter: function (value) {
            return (value ? value.toFixed(2) : 0) + " kW";
          }
        },
        lineStyle: {
          color: "#FFA299",
          width: 3,
          type: "dashed"
        },
        yAxisIndex: 1
      },
      {
        name: "External Temperature",
        data: temperatureData.value,
        type: "line",
        yAxisIndex: 3,
        tooltip: {
          valueFormatter: function (value) {
            return (value ? value.toFixed(2) : 0) + " °C";
          }
        },
        lineStyle: {
          color: "#14C7C7",
          type: "line",
          lineStyle: {
            color: "14C7C7"
          }
        }
      },
      {
        name: "Prediction Error Band",
        data: coolLoadData.value,
        type: "line",
        lineStyle: {
          width: bandData.value === 0 ? 45 : bandData.value,
          color: "#4786FF26"
        },
        tooltip: {
          valueFormatter: function (value) {
            const res = value ? +value.toFixed(2) : 0;
            if (bandData.value > 0) {
              return `${(Number(value) - Number(bandData.value)).toFixed(2)}~${(Number(value) + Number(bandData.value)).toFixed(2)} kW`;
            }
            return res + " kW";
          }
        },
        smooth: true,
        yAxisIndex: 1
      }
    ]
  };
  if (JSON.stringify(props.currentData) != "{}") {
    if (props.currentData.analysisType == "预测") {
      option.value.series[0].markPoint = {
        data: [
          {
            value: props.currentData.settingValue,
            xAxis: props.currentData.pointTime,
            yAxis: props.currentData.settingValue
          }
        ]
      };
    } else {
      option.value.series[1].markPoint = {
        data: [
          {
            value: props.currentData.settingValue,
            xAxis: props.currentData.pointTime,
            yAxis: props.currentData.settingValue
          }
        ]
      };
    }
  }
  console.log(option.value, "option.-====");
};
getoptions();
</script>

<style scoped lang="scss">
.parent {
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
